<template>
	<view class="staff-manage">
		<view class="card-box">
			<view class="card" v-for="(item,index) in staffList" :key="index">
				<view class="card-item card-item-title">姓名：{{item.name}}</view>
				<view class="card-item flex-box">
					<view>用户账号：{{item.mobile}}</view>
					<view v-if="item.role !='1' || userInfo.employeeId ===item.employeeId" @click="openPop('password',item)">
						密码管理
						<uni-icons type="right" color="#000" size="16"></uni-icons>
					</view>
				</view>
				<view class="card-item">用户角色：{{item.role==='1'?'管理员':'保洁员'}}</view>
				<view class="flex-box">
					<view class="card-item">创建时间：{{item.createTime}}</view>
					<view class="btn-box">
						<view class="edit-btn" @click="openPop('edit',item)">编辑</view>
						<view v-if="userInfo.employeeId !=item.employeeId" class="delete-btn" @click="deleteEvent(item)">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noMore">暂无更多</view>
		<view class="footer-box">
			<text class="add-btn" @click="openPop('add')">添加账号</text>
		</view>

		<uni-popup ref="popup" type="bottom" :safe-area='false'>
			<view class="pop-box">
				<view v-if="type !=='password'">
					<view class="pop-title">{{type==='add'?'新增账号':'编辑账号'}}</view>
					<view class="pop-item">
						<view class="pop-item-title">姓名：</view>
						<uni-easyinput class="pop-input" type="text" :maxlength="20" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.name" placeholder="请输入"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">手机号：</view>
						<uni-easyinput class="pop-input" type="number" :maxlength="11" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.mobile" placeholder="请输入" :disabled="type ==='edit'"></uni-easyinput>
					</view>
					<view class="pop-item" v-if="type ==='add'">
						<view class="pop-item-title">登录密码：</view>
						<uni-easyinput class="pop-input" type="text" :maxlength="50" primaryColor="#ffd589" trim="all"
							v-model="currentConfig.password" placeholder="请输入"></uni-easyinput>
					</view>
					<view class="pop-item">
						<view class="pop-item-title">角色：</view>
						<view style="display: flex;">
							<picker @change="rolePickerChange" :range="roleState" range-key="name">
								<view class="picker-tip" v-if="currentConfig.role">
									{{currentConfig.role==='1'?'管理员':'保洁员'}}</view>
								<view v-else>请选择角色</view>
							</picker>
							<uni-icons type="down" size="16"></uni-icons>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="pop-title">修改密码</view>
					<view class="pop-item" v-if="type ==='password'">
						<view class="pop-item-title">旧密码：</view>
						<uni-easyinput class="pop-input" type="text" :maxlength="50" primaryColor="#ffd589" trim="all"
							v-model="passwordInfo.oldPassword" placeholder="请输入旧密码"></uni-easyinput>
					</view>
					<view class="pop-item" v-if="type ==='password'">
						<view class="pop-item-title">新密码：</view>
						<uni-easyinput class="pop-input" type="text" :maxlength="50" primaryColor="#ffd589" trim="all"
							v-model="passwordInfo.newPassword" placeholder="请输入新密码"></uni-easyinput>
					</view>
				</view>
				<view class="pop-btn-box">
					<view class="cancel-btn" @click="closePop">取消</view>
					<view class="submit-btn" @click="submitEvent">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopId: '',
				userInfo: {},
				staffList: [],
				currentConfig: {
					shopId: '',
					name: '',
					mobile: '',
					password: '',
					role: ''
				},
				passwordInfo: {
					oldPassword: '',
					newPassword: ''
				},
				pageSize: 10,
				pageNum: 1,
				total: 0,
				type: '',
				roleState: [{
						value: '1',
						name: '管理员'
					},
					{
						value: '2',
						name: '保洁员'
					}
				],
			};
		},
		methods: {
			// 选择角色
			rolePickerChange(e) {
				this.currentConfig.role = this.roleState[e.detail.value].value
			},
			// 重置数据
			resetData() {
				this.currentConfig = {
					shopId: '',
					name: '',
					mobile: '',
					password: '',
					role: ''
				}
			},
			// 打开弹窗
			openPop(type, item) {
				console.log(111,item)
				this.type = type
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				if (type === 'edit') {
					this.currentConfig = JSON.parse(JSON.stringify(item));
				} else {
					this.resetData()
				}
				this.$refs.popup.open('center')
			},
			closePop() {
				this.$refs.popup.close()
			},
			// 添加/编辑账号
			submitEvent() {
				if(this.type !== 'password'){
					if (!this.currentConfig.name) {
						uni.showToast({
							title: '请输入姓名',
							duration: 2000,
							icon: 'none'
						})
						return
					} else if (!this.currentConfig.mobile) {
						uni.showToast({
							title: '请输入手机号',
							duration: 2000,
							icon: 'none'
						})
						return
					} else if (this.type !== 'edit' && !this.currentConfig.password) {
						uni.showToast({
							title: '请输入登录密码',
							duration: 2000,
							icon: 'none'
						})
						return
					} else if (!this.currentConfig.role) {
						uni.showToast({
							title: '请选择角色',
							duration: 2000,
							icon: 'none'
						})
						return
					}
					const data = this.currentConfig
					data.shopId = this.shopId
					let path = ''
					if (this.type === 'add') {
						path = '/applet/store/shopEmployee/add'
					} else {
						path = "/applet/store/shopEmployee/edit"
					}
					//保存设备
					this.$request({
						method: 'post',
						url: path,
						data,
						loading: true,
						isEncrypt: false
					}).then(res => {
						this.requestEvent();
						this.closePop()
						this.resetData()
					})
				}else{
					if (!this.passwordInfo.oldPassword) {
						uni.showToast({
							title: '请输入旧密码',
							duration: 2000,
							icon: 'none'
						})
						return
					} else if (!this.passwordInfo.newPassword) {
						uni.showToast({
							title: '请输入新密码',
							duration: 2000,
							icon: 'none'
						})
						return
					}
					this.changePassword()
				}
			},
			// 修改密码
			changePassword(){
				this.$request({
					method: 'post',
					url: `/applet/store/shopEmployee/editPassword`,
					loading: true,
					isEncrypt: false
				}).then(res => {

				}).catch(err => {
					console.error('删除异常：', err)
				})
			},
			// 删除账号
			deleteEvent(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除该账号？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'delete',
								url: `/applet/store/shopEmployee/delete/${this.shopId}/${item.employeeId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								this.requestEvent();
							}).catch(err => {
								console.error('删除异常：', err)
							})
						}
					}
				})

			},
			// 请求事件处理
			requestEvent() {
				this.getUserData();
			},
			// 获取用户信息
			getUserData() {
				this.$request({
					method: 'get',
					url: '/applet/store/shopEmployee/current',
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.userInfo = res.data;
					this.getStaffList();
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},

			//获取员工账号列表
			getStaffList() {
				const data = {
					shopId: this.shopId
				}
				this.$request({
					method: 'post',
					url: `/applet/store/shopEmployee/list`,
					data,
					loading: false,
					isEncrypt: false
				}).then(res => {
					this.staffList = res.rows || []
				}).catch(err => {
					console.error('查询异常：', err)
				})
			}
		},
		onLoad(options) {
			this.shopId = options.shopId;
			this.requestEvent()
		}
	}
</script>

<style lang="scss" scoped>
	.staff-manage {
		padding-bottom: 112rpx;

		.card-box {
			padding: 30rpx;
		}

		.card {
			background: #FFF;
			border-radius: 10rpx;
			padding: 20rpx;
			box-shadow: 0 2px 6px #CCC;
			margin-bottom: 20rpx;
		}

		.card-item {
			color: #333;
			line-height: 64rpx;
		}

		.card-item-title {
			font-weight: bold;
			color: #000;
			font-size: 32rpx;
		}

		.flex-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn-box {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.edit-btn {
				padding: 8rpx 16rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				border: 1px solid #ff9600;
			}

			.delete-btn {
				padding: 8rpx 16rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				color: #FFF;
				background: #ff9600;
				margin-left: 20rpx;
			}
		}

		.footer-box {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 30rpx 0;
			text-align: center;
			background: #FFF;

			.add-btn {
				display: inline-block;
				color: #FFF;
				background: #ff9600;
				font-size: 24rpx;
				border-radius: 10rpx;
				padding: 10rpx 60rpx;
			}
		}

		.pop-box {
			background: #FFF;
			border-radius: 20rpx;
			padding: 30rpx;
			width: 600rpx;

			.pop-title {
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.pop-item-title {
				width: 140rpx;
				text-align: right;
			}

			.pop-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				margin-bottom: 30rpx;
			}

			.pop-unit {
				margin-left: 10rpx;
			}

			.pop-btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 60rpx;

				.cancel-btn {
					padding: 8rpx 36rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					border: 1px solid #CCC;
				}

				.submit-btn {
					padding: 8rpx 36rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #FFF;
					background: #ff9600;
				}
			}
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}

	}
</style>